import React, { Component } from "react";
import Form from "./Form";
import List from "./List";

import { connect } from "react-redux";

// 使用saga的时候，获取仓库数据的方式和之前一样
const mapStateToProps = (state) => {
  return {
    // 只有拿数据的时候需要中间加上模块名
    // 调方法的时候不需要
    count: state.counter.count,
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    add() {
      // 如果我们添加了redux-saga，那么组件里面dispatch就不是直接调用reducer的函数了
      // 而是调用了mySaga函数
      dispatch({ type: "addAction" });
    },
  };
};

@connect(mapStateToProps, mapDispatchToProps)
class App extends Component {
  render() {
    return (
      <>
        <h2>redux-todolist-modules</h2>

        <span>{this.props.count}</span>
        <button onClick={this.props.add}>+</button>

        <hr />

        <Form />
        <List />
      </>
    );
  }
}

export default App;
